<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .m-menu {
            width: 800px;
            margin: 0 auto;
            border: 1px solid red;
            overflow: hidden; /**清除浮动**/
        }
        .m-menu-item{
            width: 200px;
            float: left;
            text-align: center;
            cursor: pointer;
        }
        .m-menu-item-selected {
            background-color:aquamarine;
        }
        .hide {
            display: none;
        }
        .m-submenu {
            position: absolute;
        }
        .m-submenu .m-submenu-item{
            width: 200px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="menu" class="m-menu">
        <div class="m-menu-item">
            <div class="m-menu-title m-menu-item-selected">一级导航1</div>
            <div class="m-submenu">
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航11</div>
                </div>
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航12</div>
                </div>
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航13</div>
                </div>
            </div>
        </div>
        <div class="m-menu-item">
            <div class="m-menu-title">一级导航2</div>
            <div class="m-submenu hide">
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航21</div>
                </div>
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航22</div>
                </div>
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航23</div>
                </div>
            </div>
        </div>
        <div class="m-menu-item">
            <div class="m-menu-title">一级导航3</div>
            <div class="m-submenu hide">
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航31</div>
                </div>
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航32</div>
                </div>
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航33</div>
                </div>
            </div>
        </div>
        <div class="m-menu-item">
            <div class="m-menu-title">一级导航4</div>
            <div class="m-submenu hide">
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航33</div>
                </div>
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航33</div>
                </div>
                <div class="m-submenu-item">
                    <div class="m-submenu-title">二级导航33</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var menuDom = document.getElementById('menu')
        var menuItemsDom = menuDom.getElementsByClassName("m-menu-item")
        for(var i=0,len=menuItemsDom.length;i<len;i++) {
            var menuItemDom = menuItemsDom[i]
            var menuTitleDom = menuItemDom.querySelector(".m-menu-title")
            menuTitleDom.onmouseover = function() {
                for(var j=0,len=menuItemsDom.length;j<len;j++) {
                    var ele = menuItemsDom[j].querySelector(".m-menu-title")
                    var subMenuEle = menuItemsDom[j].querySelector(".m-submenu")
                    if(ele == this) {
                        ele.className='m-menu-title m-menu-item-selected'
                        subMenuEle.className = "m-submenu"
                    } else {
                        ele.className='m-menu-title'
                        subMenuEle.className = "m-submenu hide"
                    }
                }
            }
        }
    </script>
</body>
</html>